<template>
  <div>
  <el-carousel :interval="4000" type="card" height="250">
    <el-carousel-item v-for="item in img" :key="item">
      <el-image
        style="width: 450px; height: 250px"
        :src="item"
      ></el-image>
    </el-carousel-item>
  </el-carousel>
<!--    <div>-->
<!--      <div class="a2"></div>-->

<!--      <div class="a1"></div>-->
<!--      <div class="a2"></div>-->
<!--      <div class="a1"></div>-->

<!--      <div class="a2"></div>-->

<!--      <div class="a1"></div>-->
<!--      <div class="a2"></div>-->
<!--      <div class="a1"></div>-->
<!--    </div>-->

      <el-table
        :data="tableData"
        height="550"
        border
        style="width: 100%">
        <el-table-column
          prop="musicName"
          label="歌曲"
          align="center">
        </el-table-column>
        <el-table-column
          prop="musicImage"
          label="图片"
          align="center">
          <div class="demo-image">
            <div class="block" v-for="fit in fits" :key="fit">
              <el-image
                style="width: 100px; height: 100px"
                :src="url.musicImage"
                :fit="fit"></el-image>
            </div>
          </div>

<!--          <template slot-scope="scope">-->
<!--            <img :src="scope.row.ImageUrl" style="height: 50px"/>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
          prop="musicUrl"
          label="播放"
          align="center">
          <audio style="width: 90%;" ref="audio" :src="url.musicUrl" controls autoplay loop></audio>
        </el-table-column>
      </el-table>


  </div>
</template>

<script>
  import  img1 from "../view/imgs/1.jpg"
  import  img2 from "../view/imgs/2.jpg"
  import  img3 from "../view/imgs/3.jpg"
  import  img4 from "../view/imgs/4.jpg"
  import  img5 from "../view/imgs/5.jpg"
  import  img6 from "../view/imgs/6.jpg"
  import  img7 from "../view/imgs/7.jpg"
  import  img8 from "../view/imgs/8.jpg"
  import  img9 from "../view/imgs/9.jpg"
  import axios from "axios";

  export default {
    name : "Index",
    data () {
      return {
        img:[img1,img2,img3,img4,img5,img6,img7,img8,img9],
        tableData: [],
        fits: ['scale-down'],
        url: '',
        a1:''
      }
    },
    mounted() {
      axios.get("http://127.0.0.1:8100/rec/2").then(res=>{
        console.log(res.data.list)
        this.tableData = res.data.list
        this.url = res.data.list[0]
      })
    },
  }
</script>
<style>
  .el-carousel__item h3 {

    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }


  /*#a1{*/
  /*  width: 100%;*/
  /*  height: 200px;*/
  /*}*/
  .a1{
    width: 97%;
    height: 200px;
    float: left;
  }
  .a2{
    width: 100px;
    height: 300px;
    float: left;
    background-color: #333333;
  }
  .el-table-column{
    height: 30px;
  }
  .el-table__header th {
    padding: 0;
    height: 30px;
    line-height: 60px;
  }
  .fieldset.a1{
    width: 100%;
  }
</style>

